<template>
  <div>
    <el-row :gutter="40" class="panel-group">
      <!--    前缀-->
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">

          <div class="card-panel-icon-wrapper icon-people">
            <img src="../assets/images/forPhotoOne.png" alt="">
          </div>
          <div class="card-panel-description">
            <count-to :start-val="0" :end-val="prefix" :duration="500" class="card-panel-num" />
            <div class="card-panel-text">
              前缀
            </div>

          </div>
        </div>
      </el-col>
      <!--    企业-->
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <img src="../assets/images/forPhotoTwo.png" alt="">
          </div>
          <div class="card-panel-description">
            <count-to :start-val="0" :end-val="company" :duration="500" class="card-panel-num" />
            <div class="card-panel-text">
              企业
            </div>

          </div>
        </div>
      </el-col>
      <!--    标识存量-->
      <!-- <el-col :xs="24" :sm="24" :lg="4" class="card-panel-col">
               <div class="card-panel" style="cursor: auto">
                 <div class="card-panel-icon-wrapper icon-money">
                   <img src="../assets/images/Forma5.png" alt="">
                 </div>
                 <div class="card-panel-description">
                   <count-to :start-val="0" :end-val="exist" :duration="900" class="card-panel-num" />
                   <div class="card-panel-text">
                     标识存量
                   </div>
                 </div>
               </div>
             </el-col>-->
      <!--    标识注册量-->
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" style="cursor: auto">
          <div class="card-panel-icon-wrapper icon-message">
            <img src="../assets/images/forPhotoThree.png" alt="">
          </div>
          <div class="card-panel-description">
            <count-to :start-val="0" :end-val="mark" :duration="700" class="card-panel-num" />
            <div class="card-panel-text">
              标识注册量
            </div>
          </div>
        </div>
      </el-col>
      <!--    标识解析量-->
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel"  style="cursor: auto">
          <div class="card-panel-icon-wrapper icon-shopping">
            <img src="../assets/images/forPhotoFour.png" alt="">
          </div>
          <div class="card-panel-description">
            <count-to :start-val="0" :end-val="analy" :duration="1200" class="card-panel-num" />
            <div class="card-panel-text">
              标识解析量
            </div>

          </div>
        </div>
      </el-col>
      <!--     申请
             <el-col :xs="24" :sm="24" :lg="12" class="card-panel-col">

               <div class="card-panel" style="cursor: pointer" @click="jumpTo('/examine/enterprise',2)">
                 <div class="card-panel-icon-wrapper icon-shopping">
                   <img src="../assets/images/Forma3.png" alt="">
                 </div>
                 <div class="card-panel-description">
                   <count-to :start-val="0" :end-val="apply" :duration="1200" class="card-panel-num" />
                   <div class="card-panel-text">
                     申请
                   </div>
                 </div>
               </div>
             </el-col>-->
    </el-row>

  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getList } from '@/api/examine_trusteeship'
import { userInfo, changePwd } from '@/api/user'

export default {
  components: {
    CountTo
  },
  props: {
    prefix: {
      type: Number
    },
    mark: Number,
    apply: Number,
    company: Number,
    exist: Number,
    analy: Number
  },
  data() {
    return {
      total: 0,
      params: {
        page: 1,
        pageSize: 30,
        status: 0
      },
      trustLen: 0,
      userInfo: {},
      userCode: 0
    }
  },
  created: function() {
    this.getUserInfo()
  },
  mounted() {
    // this.fetchData();
  },
  methods: {
    jumpTo(url, num) {
      if (num == 2) {
        if (this.userInfo.locationCode == '') {
          this.$router.push({ path: url, query: { hasSh: 2 }})
        } else {
          this.$router.push({ path: url, query: { hasSh: 1 }})
        }
      } else {
        this.$router.push({ path: url })
      }
    },
    getUserInfo() {
      userInfo().then((res) => {
        console.log(res)
        if (res) {
          this.userInfo = res
          this.userCode = res.locationCode
        } else {

        }
      })
    },
    fetchData() {
      var self = this
      getList(self.params).then(response => {
        self.trustLen = response.rows.length
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  @media only screen and (min-width: 1200px){
    .el-col-lg-6 {
      width: 24% !important;
    }
  }
  @media only screen and (max-width: 1490px){
    .card-panel-description {
      float: left;
      font-weight: bold;
      margin: 25px 0 0 5px;
      margin-left: 4% !important;
      text-align: left;
    }
    .card-panel-text {
      line-height: 30px !important;
      color: rgba(0, 0, 0, 0.6);
      font-size: 16px !important;
      margin-top: 15px;
    }

    .card-panel-num {
      font-size: 24px !important;
      text-align: left;
      color: #1e1e1e;
    }
  }
    .panel-group {
        width: 100%;
        float: left;
        margin-top: 0;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        margin-left: 0 !important;
        margin-right: 0;

        .card-panel-col {
            margin-bottom: 20px;
            display: block;
            padding-left: 0 !important;
            padding-right: 20px !important;
        }
        .card-panel-col:last-child{
            padding-right: 0 !important;
        }

        .card-panel {
            height: 108px;
            cursor: auto;
            font-size: 12px;
            position: relative;
            overflow: hidden;
            color: #666;
            background: #fff;
            border-radius: 10px;
            padding-left: 0%;
            box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
            border-color: rgba(0, 0, 0, .05);
            /*margin-right: 20px;*/
            &:hover {
                .card-panel-icon-wrapper {
                    color: #fff;
                }

                /*  .icon-people {
                    background: #40c9c6;
                  }

                  .icon-message {
                    background: #36a3f7;
                  }

                  .icon-money {
                    background: #f4516c;
                  }

                  .icon-shopping {
                    background: #34bfa3
                  }*/
            }

            .icon-people {
                color: #40c9c6;
            }

            .icon-message {
                color: #36a3f7;
            }

            .icon-money {
                color: #f4516c;
            }

            .icon-shopping {
                color: #34bfa3
            }

            .card-panel-icon-wrapper {
                height: 100%;
                float: left;
                margin: 0 5px 0 0;
                padding: 0;
                transition: all 0.38s ease-out;
                border-radius: 6px;
                img {
                    height: 100%;
                }
            }

            .card-panel-icon {
                float: left;
                font-size: 48px;
            }

            .card-panel-description {
                float: left;
                font-weight: bold;
                margin: 20px 0 0 26px;
                margin-left: 11%;
                text-align: left;

                .card-panel-text {
                    line-height: 12px;
                    color: rgba(0, 0, 0, 0.6);
                    font-size: 18px;
                    margin-top: 10px;
                }

                .card-panel-num {
                    font-size: 32px;
                    text-align: left;
                  color: #1e1e1e;
                }
            }
        }
    }

    .waitBox {
        width: 100%;
        float: left;
        height: 100px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .05);
        padding: 0 20px;
        margin-bottom: 20px;
        position: relative;

        .waitTitle {
            height: 100px;
            font-size: 24px;
            font-weight: 700;
            line-height: 100px;
            padding-left: 10px;
            padding-right: 40px;
            float: left;
            position: relative;
        }
        .waitTitle:after{
            content: '';
            width: 3px;
            height: 40px;
            background: #4f41d4;
            position: absolute;
            right: 0;
            top: 30px;
        }

        .applyItem {
            width: 70%;
            height: 100px;
            float: left;
            position: relative;
            margin-top: 0;
            cursor: pointer;

            .waitBackImg {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }

            .appImg {
                width: 60px;
                position: absolute;
                left: 5%;
                top: 20px;
                z-index: 1;
            }

            .appTitle {
                font-size: 24px;
                color: #000;
                position: absolute;
                left: 14%;
                top: 35px;
                z-index: 1;
            }

        }
        .appNums {
            font-size: 28px;
            color: #4779e9;
            position: absolute;
            right: 8%;
            top: 35px;
            z-index: 1;
        }
        .tipNums {
            position: absolute;
            right: -4px;
            top: -4px;
            width: 20px;
            height: 20px;
            background-color: #fc5750;
            color: #fff;
            line-height: 20px;
            border-radius: 20px;
            text-align: center;

        }
    }

    @media (max-width: 550px) {
        .card-panel-description {
            display: none;
        }

        .card-panel-icon-wrapper {
            float: none !important;
            width: 100%;
            height: 100%;
            margin: 0 !important;

            .svg-icon {
                display: block;
                margin: 14px auto !important;
                float: none !important;
            }
        }
    }
</style>
